'use client'
import { useEffect, useState } from "react"
import TJImg from '@/app/assets/images/news/tuanjian.jpg'
import GLDImg from '@/app/assets/images/news/gld1.png'
import DSHImg from '@/app/assets/images/news/dsh.png'
import BNImg from '@/app/assets/images/news/bannan.png'
import Image from "next/image"

interface MenuData {
  label: string,
  code: string
}

interface NewsListItem {
  src: any,
  title: string,
  intro: string
}

export default function NewsContent() {
  const [menuData, setMenuData] = useState<MenuData[]>([])
  const [activeItem, setActiveItem] = useState<MenuData>();
  const [newsList, setNewsList] = useState<NewsListItem[]>([])

  useEffect(() => {
    getMenuList();
    getNewsList('');
  }, [])

  useEffect(() => {
    if (activeItem) {
      getNewsList(activeItem.code);
    }
  }, [activeItem])

  async function getMenuList() {
    const data = [
      // { label: '行业动态', code: 'industry' },
      { label: '公司新闻', code: 'company' }
    ];
    setMenuData(data);
  }

  async function getNewsList(code: string) {
    let news: NewsListItem[] = [
      {
        title: '凝心聚力 光创辉煌·首厚智能科技团建',
        intro: '阳光正暖，不负时光，一路向前，未来可期。凝心聚力，光创辉煌！',
        src: TJImg
      },
      {
        title: '强强联合 | 首厚智能与广联达签署战略合作协议',
        intro: '4月21日，重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）与广联达科技股份有限公司（以下简称“广联达”）在广联达重庆分公司签署战略合作协议。广联达西南大区施工业务总经理武煜晖、重庆区域施工业务总经理闫玉龙、销售总监张萍、市场总监欧小玲、民企部总监李建宏、售前咨询师董怡，西藏天路股份有限公司党委副书记、重庆重交再生资源开发股份有限公司董事长达瓦扎西，首厚智能董事长陈俊、总经理卞曙刚、副总经理黄萍、技术总监张彬彬出席签约现场，双方进行了深入交流，并共同见证双方战略合作协议的签署。',
        src: GLDImg
      },
      {
        title: '热烈庆祝公司首届董事会顺利召开',
        intro: '近日，在重庆重交再生资源开发股份有限公司（以下简称“重庆重交”）和重庆首厚智能科技研究院有限公司（以下简称“首厚智能”）联合项目团队的共同努力下，双方公司正式签订了股权转让协议，重庆重交通过股权收购正式成为我司法人大股东，同时正式进军数字化信息产品行业，为重庆重交拓展新基建业务打下坚实的基础。',
        src: DSHImg
      },
      {
        title: '巴南区疾控中心大规模核酸检测信息系统正式投入使用！',
        intro: '2020年1月10日，巴南区疾病预防控制中心又一次迎来了大规模核酸检测任务。本次检测任务全程采用了由我司提供的大规模核酸检测信息系统。通过该系统实现了核酸检测工作效率的提升，并降低出错率，同时能够随时准确了解到各职能的工作任务及工作情况，快速掌握各样品检验进度，赢得了客户的认可，获得客户好评！本次大规模采样受到巴南区政府副区长、卫健委党委书记、卫建委副主任等领导的高度重视，并莅临现场指导。大规模核酸检测信息系统介绍本次为巴南区疾病预防',
        src: BNImg
      },
    ];
    setNewsList(news);
  }

  function onMenuTap(item: MenuData) {
    setActiveItem(item);
  }

  function renderNewsItem(item: NewsListItem, index: number) {
    const { src, title, intro } = item;
    return (
      <li className="mt-2 mb-2 flex h-[120px] items-center" key={index}>
        <div className="w-[120px]">
          <Image src={src} alt={title} width={120} style={{height: '90px'}} />
        </div>
        <div className="flex-1 ml-4">
          <h5 className="text-sm">{title}</h5>
          <p className="text-xs text-gray-400">{intro}</p>
        </div>
      </li>
    )
  }

  return (
    <div className="flex w-full pb-10">
      <div className='w-[20rem] bg-gray-100 p-2'>
        <div className='field-title'>分类</div>
        <div className='h-[1px] bg-gray-300 mt-2 mb-2'></div>
        <ul className=''>
          {
            menuData.map((item, index) => {
              return (
                <li
                  key={index}
                  className='hover:bg-gray-300 pt-1 pb-1 cursor-pointer'
                  onClick={() => onMenuTap(item)}>
                  {item.label}
                </li>
              )
            })
          }
        </ul>
      </div>
      <div className='flex-1 ml-1 border border-solid border-slate-300 p-2'>
        <div className='field-title'>{activeItem?.label || '新闻资讯'}</div>
        <div className='h-[1px] bg-gray-300 mt-2 mb-2'></div>
        <ul>
          {
            newsList.map((item, index) => renderNewsItem(item, index))
          }
        </ul>
      </div>
    </div>
  )
}